<script setup lang="ts">
import type { TabBarProps } from '@/components/TabBar/type'

const { options } = defineProps<TabBarProps>()
const value = defineModel<number>('value', { required: true })

// 映射
// const tabbarList = [
//   {
//     text: '单词速记',
//     icon: 'home',
//     path: '/pages/student/unitInfo/index',
//   },
//   {
//     text: '学员',
//     icon: 'photo',
//     path: '/pages/student/userCenter/index',
//   },
// ]

function handleTabChange(index: number) {
  uni.redirectTo({ url: options[index].path })
}
</script>

<template>
  <uv-tabbar
    :value="value"
    class="tab-bar"
    :fixed="true"
    :safe-area-inset-bottom="true"
    active-color="#43B09B"
    @change="handleTabChange"
  >
    <uv-tabbar-item v-for="item in options" :key="item.text" :text="item.text" :icon="item.icon" />
  </uv-tabbar>
</template>

<style lang="scss" scoped>
.tab-bar {
  ::v-deep {
    .uv-tabbar__content__item-wrapper{
        height: 100rpx;
        .uv-tabbar-item__text{
            margin-top: 4rpx;
            font-size: 24rpx;
        }
        .uvicon{
            font-size: 40rpx !important;
        }
    }
  }
}
</style>
